<!--
 * @Project: 
 * @Remark: 
 * @Author: shaoyuan
 * @Date: 2023-04-19 19:55:58
 * @LastEditors: shaoyuan
 * @LastEditTime: 2023-04-19 22:50:14
 * @FilePath: \logicflow-vue3-ts-vite\src\components\BeautifyFlow.vue
-->
<script setup lang="ts">
import { onMounted, ref } from "vue"
import LogicFlow from "@logicflow/core"
import { Snapshot, Control, Menu, SelectionSelect } from "@logicflow/extension"
import "@logicflow/core/dist/style/index.css"
import "@logicflow/extension/lib/style/index.css"
import BeautifyFlowExtension from "./beautifyElement/index"
import Dagre from "./beautifyElement/tools/dagre"

LogicFlow.use(Snapshot)
LogicFlow.use(Control)
LogicFlow.use(Menu)
LogicFlow.use(SelectionSelect)

const lf = ref<any>(null)
const beautifyFlowRef = ref<any>(null)

onMounted(() => {
    lf.value = new LogicFlow({
        container: beautifyFlowRef.value as unknown as HTMLElement,
        width: 1200,
        height: 500,
        grid: {
            size: 10,
            visible: true,
            type: "mesh",
            config: {
                color: "#ababab",
                thickness: 1,
            },
        },
        keyboard: {
            enabled: true,
        },
        plugins: [ BeautifyFlowExtension, Dagre, Control ],
    })

    lf.value.extension.control.addItem({
        iconClass: "beautify-flow",
        title: "",
        text: "一键美化",
        onClick: (lf: any, ev: any) => {
            lf.extension.dagre &&
                lf.extension.dagre.layout({
                    nodesep: 20,
                    ranksep: 20,
                })
        },
    })

    lf.value.render()
})
</script>
<template>
    <div class="beautify-chart">
        <div ref="beautifyFlowRef" class="container"></div>
    </div>
</template>
<style scoped>
.container {
    width: 100%;
    height: 100%;
}
.bpmn-example-container {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pattern {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 60px;
    display: flex;
    flex-direction: column;
    z-index: 111;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 10px 0;
    font-size: 12px;
    color: #676768;
    user-select: none;
}
.pattern-selection {
    width: 36px;
    height: 36px;
    background: url()
        center center no-repeat;
    cursor: pointer;
    opacity: 0.99;
}
.pattern-start {
    width: 36px;
    height: 36px;
    background: url()
        center center no-repeat;
    cursor: grab;
    opacity: 0.99;
}
.pattern-end {
    width: 36px;
    height: 36px;
    background: url()
        center center no-repeat;
    cursor: grab;
    opacity: 0.99;
}
.pattern-user {
    width: 36px;
    height: 36px;
    background: url()
        center center no-repeat;
    cursor: grab;
    opacity: 0.99;
}
.pattern-condition {
    width: 36px;
    height: 36px;
    background: url()
        center center no-repeat;
    cursor: grab;
    opacity: 0.99;
}
.graph-io {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 10px;
    display: flex;
}
.graph-io > span {
    margin: 0 5px;
    cursor: pointer;
}
#upload-xml {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}
.upload {
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.upload::-webkit-file-upload-button {
    cursor: pointer;
}
</style>
